<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../css/swiper-bundle.min.css" />
    <script src="../js文件/axios.min.js"></script>
    <script src="../js文件/api.js"></script>
    <script src="../js文件/swiper-bundle.min.js"></script>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .banner {
      margin: 0 800px;
      width: 480px;
      height: 522px;
      /* float: right; */
    }
    .top {
      width: 480px;
      height: 200px;
    }
    .top p {
      font-size: 46px;
      font-weight: 900px;
      text-align: center;
      line-height: 200px;
    }
    .mid {
      width: 480px;
      height: 250px;
    }
    .int1,
    .int2 {
      width: 478px;
      height: 52px;
      margin-top: 40px;
    }
    .but {
      width: 480px;
      height: 72px;
    }
    .but button {
      width: 478px;
      height: 52px;
      background: #3487ff;
      border: none;
    }
    .swiper-container {
      width: 470px;
      height: 959px;
      float: left;
    }
    .swiper-wrapper img {
      width: 530px;
      height: 962px;
    }
  </style>
  <body>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="../img/注册1.jpg" alt="" /></div>
        <div class="swiper-slide"><img src="../img/注册2.jpg" alt="" /></div>
        <div class="swiper-slide"><img src="../img/注册3.jpg" alt="" /></div>
      </div>
    </div>
    <div class="banner">
      <div class="top">
        <p>欢迎注册QQ</p>
      </div>
      <div class="mid">
        <input type="text" class="int1" placeholder="昵称" /><span></span>
        <input type="password" class="int2" placeholder="密码" /><span></span>
      </div>
      <div class="but"><button onclick="regClick()">注册</button></div>
    </div>
  </body>

  <script>
    let ipts = document.querySelectorAll("input");
    let span = document.querySelector("span");
    let isUsername = false;
    let isPassword = false;
    ipts[0].onfocus = function () {
      span.innerHTML = "6-18位，数字 字母 下划线，字母开头";
      span.style.color = "gray";
    };
    ipts[0].onblur = function () {
      let reg = /^[a-z]\w{5,17}$/i;
      if (this.value.length < 6) {
        span.innerHTML = "长度不够6位";
        span.style.color = "red";
        isUsername = false;
      } else {
        if (reg.test(this.value)) {
          axios
            .get(checkusernameAPI, {
              params: { username: ipts[0].value },
            })
            .then((res) => {
              let obj = res.data;
              console.log(obj);
              span.innerHTML = obj.msg;
              if (obj.code == 1) {
                span.style.color = "green";
                isUsername = true;
              } else {
                span.style.color = "red";
                isUsername = false;
              }
            });
        } else {
          span.innerHTML = "只能输入数字 字母 下划线";
          span.style.color = "red";
          isUsername = false;
        }
      }
    };

    ipts[1].onfocus = function () {
      this.nextElementSibling.innerHTML = "6-16个字符";
    };
    ipts[1].onblur = function () {
      let reg = /^\S{6,16}$/;
      if (reg.test(this.value)) {
        this.nextElementSibling.innerHTML = "";
        isPassword = true;
      } else {
        this.nextElementSibling.innerHTML = "格式不正确";
        isPassword = false;
      }
    };
    function regClick() {
      if (isUsername && isPassword) {
        let username = ipts[0].value;
        let password = ipts[1].value;
        axios
          .get(regAPI, {
            params: { username: username, password },
          })
          .then((res) => {
            let { data } = res;
            alert(data.msg);
            if (data.code == 1) {
              location.href = "cf登录页.html";
            }
          });
      } else {
      }
    }
  </script>
  <script>
    var mySwiper = new Swiper(".swiper-container", {
      autoplay: true,
      loop: true,
    });
  </script>
</html>
